//待付款
import React from 'react'
import BetterScroll from 'better-scroll'  //better-scrool
import { useState, useEffect, useRef } from 'react'
import {
    SyncOutlined,
} from '@ant-design/icons';
const OrAwaitMoney = (props) => {
    const duo = (props) => {
        // props.changeDefaults('/order/orall')
        // props.props.props.history.push('/order/orall')
    }
    let [Bsc, changBs] = useState()
    let wrapper = useRef()
    let content = useRef()
    let [flag, changflag] = useState(false)
    let [pull, changepull] = useState('')
    let [pos, changepos] = useState(0 + "px")
    let [timer, changetimer] = useState(null)
    let [counts,setCount]=useState(0)
    let [shi,setshi]=useState([])
    let [dataList,setdata]=useState([])//显示的数据
    let [datazong,setdatazong]=useState([])//总数据
    const handler = (n) => {
        //滑动的距离+当前页面的（wrapper）固定高度 -子（content）盒子的撑开的高度
        if(wrapper.current&&content.current){
            if (((Math.abs(n.y) + (wrapper.current.clientHeight)) - (content.current.clientHeight)) > 30) {

                flag = true
                changepull(flag)
                pull = "松开立即加载"
                changepull(pull)
                pos = 50 + "px"
                changepos(pos)
            } else {
                if (!flag) {
                    pull = "下拉加载"
                    changepull(pull)
                }
            }
        }
        
    }
    const handlerend = (n) => {
        if (flag) {
            pos = 50 + "px"
            changepos(pos)
            pull = <SyncOutlined spin />
            changepull(pull)
            //请求数据
            clearTimeout(timer)
            timer = setTimeout(() => {
                pos = 0 + "px"
                changepos(pos)
                pull = ""
                changepull(pull)
                flag = false
                changflag(flag)
                if((props.data.length-3)>counts){
                    counts+=1
                    setCount(counts)

                }else{
                    counts+=1
                    setCount(counts)
                    // pull = "没有数据了"
                    // changepull(pull)
                }
            }, 2000)
            changetimer(timer)
        }
    }
    const Bs = () => {
        Bsc = new BetterScroll('.or_await_money', {
            // ...... 详见配置项
            scrollY: true,
            probeType: 2,
            pullUpLoad: true,
            click:true,
            bounce: {
                top: false,
                bottom: true,
                left: false,
                right: false
            }
        })
        Bsc.on('scroll', handler)
        Bsc.on('scrollEnd', handlerend)
        changBs(Bsc)
    }
    const buttonStatus = (num) => {
        let type = "再次购买"
        switch (num) {
            case '1':
                type = "付款"
                break;
            case '2':
                type = "再次购买"
                break;
            case '3':
                type = "加入购物车"
                break;

            default:
                break;
        }
        return type
    }
    useEffect(() => {
        setTimeout(() => {
            Bs()
        }, 100);
        console.log(props.data);
        // dataAwait=props.data
        // setDataAwait(dataAwait)
        return () => {
            // 只有unmount 时调用
            // Bsc.off('scroll', handler)
            // changBs(Bsc)
            // timer = null
            // changetimer(timer)
        }
    }, [])
    useEffect(()=>{
        setTimeout(() => {
            Bs()

        }, 200);
        datazong=JSON.parse(JSON.stringify(props.data))
        setdatazong(datazong)
        dataList=datazong.slice(counts*3,(counts+1)*3)
        setdata(dataList)
        dataList.forEach((item)=>{
            shi.push(item)
        })
        setshi(shi)
        // console.log(dataList);
    },[counts])
    // useEffect(() => {
    //     setTimeout(() => {
    //         if(content.current){
    //             if (content.current.children !== undefined) {
    //                 if (content.current.children.length <= 3) {
    //                     // Bsc.off('scroll', handler)
    //                     // changBs(Bsc)
    //                     timer = null
    //                     changetimer(timer)
    //                 }
    //             }
    //         }
            
    //     }, 300);
    // })
    return <>
        {props.props.deng ?
            <div className="or_await_money" ref={wrapper}>
                <div ref={content} style={{ bottom: pos }}>
                {shi.map((item, index) => {
                        return <div key={index + "l"}>
                            <div>
                                <h2>{item.store}</h2>
                                <span>待付款</span>
                            </div>
                            <div>
                                <div>
                                    <img src={item.commodity_images[0]} alt="" />
                                </div>
                                <p>
                                    {item.commodity_mess}
                                </p>
                                <div>
                                    <h3><span>￥</span>{item.order_price}</h3>
                                    <p>共<span>{item.order_number}</span>件</p>
                                </div>
                            </div>
                            <div>
                                <div><span></span></div>
                                <div  onClick={() => {  props.shopp(item.order_status,item.car_id) }}>
                                    <span>{buttonStatus(item.order_status)}</span>
                                </div>
                            </div>
                        </div>
                    })}
                    {/* <div>
                        <div>
                            <h2>店铺名字</h2>
                            <span>状态（完成）</span>
                        </div>
                        <div>
                            <div></div>
                            <p>
                                puma彪马标彪彪彪彪彪彪彪彪彪彪彪彪puma彪马标彪彪彪彪彪彪彪彪彪彪彪彪a彪马标彪彪彪彪彪彪彪彪彪彪彪彪puma彪马标彪彪彪彪彪彪彪彪彪彪彪彪
                            </p>
                            <div>
                                <h3><span>￥</span>179</h3>
                                <p>共<span>1</span>件</p>
                            </div>
                        </div>
                        <div>
                            <div><span onClick={() => { duo(props) }}>更多</span></div>
                            <div>
                                <span>再次购买</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <h2>店铺名字</h2>
                            <span>状态（完成）</span>
                        </div>
                        <div>
                            <div></div>
                            <p>
                                puma彪马标彪彪彪彪彪彪彪彪彪彪彪彪puma彪马标彪彪彪彪彪彪彪彪彪彪彪彪a彪马标彪彪彪彪彪彪彪彪彪彪彪彪puma彪马标彪彪彪彪彪彪彪彪彪彪彪彪
                            </p>
                            <div>
                                <h3><span>￥</span>179</h3>
                                <p>共<span>1</span>件</p>
                            </div>
                        </div>
                        <div>
                            <div><span onClick={() => { duo(props) }}>更多</span></div>
                            <div>
                                <span>再次购买</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <h2>店铺名字</h2>
                            <span>状态（完成）</span>
                        </div>
                        <div>
                            <div></div>
                            <p>
                                puma彪马标彪彪彪彪彪彪彪彪彪彪彪彪puma彪马标彪彪彪彪彪彪彪彪彪彪彪彪a彪马标彪彪彪彪彪彪彪彪彪彪彪彪puma彪马标彪彪彪彪彪彪彪彪彪彪彪彪
                            </p>
                            <div>
                                <h3><span>￥</span>179</h3>
                                <p>共<span>1</span>件</p>
                            </div>
                        </div>
                        <div>
                            <div><span onClick={() => { duo(props) }}>更多</span></div>
                            <div>
                                <span>再次购买</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <h2>店铺名字</h2>
                            <span>状态（完成）</span>
                        </div>
                        <div>
                            <div></div>
                            <p>
                                puma彪马标彪彪彪彪彪彪彪彪彪彪彪彪puma彪马标彪彪彪彪彪彪彪彪彪彪彪彪a彪马标彪彪彪彪彪彪彪彪彪彪彪彪puma彪马标彪彪彪彪彪彪彪彪彪彪彪彪
                            </p>
                            <div>
                                <h3><span>￥</span>179</h3>
                                <p>共<span>1</span>件</p>
                            </div>
                        </div>
                        <div>
                            <div><span>更多</span></div>
                            <div>
                                <span>再次购买</span>
                            </div>
                        </div>
                    </div> */}
                    <div className="orall_body_biu"><span className="icons-list">{pull}</span></div>
                </div>

            </div>
            : null}
    </>

}
export default OrAwaitMoney